<template>
  <div class="topNav">
    <div class="topLeft">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-danlieliebiao"></use>
        </svg>
    </div>
    <div class="topContent">
        <span>我的</span>
        <span class="active">发现</span>
        <span>云村</span>
        <span>视频</span>
    </div>
    <div class="topRight">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sousuo"></use>
        </svg>
    </div>
  </div>
</template>

<script>
export default {
  name: "TopNav",
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang='less'>
    .topNav{
        width: 100%;
        height: 1rem;
        padding: .2rem;
        display: flex;
        justify-content: space-between;
        align-content: center;
        .icon {
            margin-top: .03rem;
        }
        .topContent{
            width: 70%;
            display: flex;
            height: 100%;
            justify-content: space-around;
            font-size: .36rem;
            
            .active{
                font-weight: 900;
            }
        }
    }
</style>
